<style lang="stylus" scoped>
.toback {
  width: 100%;
  font-size: 1.8rem;
  line-height: 2.6;
  background: #358ff0;
  p {
    text-align: center;
    color: #ffffff;
  }
  .toleft {
    float: left;
    font-size: 2.2rem;
    color: #ffffff;
    padding: 1rem 2rem;
  }
  .search {
    width: 5rem;
    color: #ffffff;
    height: 2.2rem;
    line-height: 2.6;
    float: right;
    font-size: 1.8rem;
  }
}
.share
  width 100%
  background red
  margin 5rem 0 0 0
.code
  width 100%
  margin 0 auto
  .qrcode
    text-align center
    width 200px
    height 200px
    padding-left 100px
    padding-top 50px
</style>
<template>
    <div>
      <nav class="toback">
       <router-link to="/repayment">
         <Icon type="chevron-left" class="toleft" />
       </router-link>
       <p class="search"></p>
       <p>分享链接</p>
      </nav>



      <div class="code">
        <div class="qrcode" id="qrCode" ref="qrCodeDiv"></div>
      </div>

      <div class="share">
        <Input v-model="shareUrl" type="textarea" :rows="4" placeholder="Enter something..." />
      </div>


    </div>





</template>
<script>
import QRCode from 'qrcodejs2';
export default {
    name:'Qrcode',
    data() {
      return {
        shareUrl:"",
      };
    },
    mounted(){
      if(!this.$store.state.show){
        this.$router.push({path:'/repayment'})
      }
      this.shareUrl="http://pos.zysq.top/#/Register?superior1="+this.$store.state.user.userId
      this.bindQRCode();
    },
    methods:{
      bindQRCode: function () {
        new QRCode(this.$refs.qrCodeDiv, {
          text: this.shareUrl,
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
      }
    }
}
</script>
